<template>
  <div>
    <p>
      <label>关键字：</label>
      <input placeholder="输入关键字搜索" :id="selectId" ></input>
    </p>
    <div :id="contentId" v-bind:style="`width: ${width}px; height: ${height}px`"/>
  </div>


</template>

<script>
  import { loadJs as loadMapJs, randomUUID } from '../../../utils/util'
  import { mapJsUrl } from '../../../config/constant.config'

    export default {
        name: 'PointSelect',
        describe:'定位点选取',
        props:{
          width:{
            type:Number,
            required:false,
            default:470,
          },
          height:{
            type:Number,
            required:false,
            default:500,
          },
          value:{
            type:String,
            required:false,
            default:'',
          }

        },
        mounted() {
          this.loadJs();
        },
        data(){
          return {
            selectId:randomUUID(),
            contentId:randomUUID(),
            mapJs:mapJsUrl,
            map:undefined,
            marker:undefined,
            autoComplete:undefined
          }
        },
        methods:{
          loadJs(){
            loadMapJs(this.mapJs, this.init);
          },
          searchQuery(result){
            if(result && result.poi && result.poi.location){
              let value = result.poi.location.getLng() + "," + result.poi.location.getLat();
              this.initMarket(value);
              this.$emit('change', value);
              this.map.setCenter(result.poi.location)
            }
          },
          init(){



            let center = [112.434468,34.663041];
            if(this.value){
              try{
                let c = this.value.split(",");
                center[0] = Number.parseFloat(c[0]);
                center[1] = Number.parseFloat(c[1]);
              }catch (e) {
                console.error("坐标定位点不是一个有效的数字定位点", this.value);
              }

            }
            this.map = new window.AMap.Map(this.contentId, {
              resizeEnable: true,
              center: center,
              zoom: 13
            });
            window.AMap.plugin(['AMap.Autocomplete'],()=>{//异步同时加载多个插件
              // 实例化Autocomplete
              let autoOptions = {
                // input 为绑定输入提示功能的input的DOM ID
                input: this.selectId,
                map:this.map

              }
              let autoComplete= new window.AMap.Autocomplete(autoOptions);
              autoComplete.search(document.getElementById(this.selectId).value, function(status, result){
                console.log(status, result)
              });
              autoComplete.on('select', this.searchQuery)
              this.autoComplete = autoComplete;
            });
            this.map.on('click', this.mapClickOn);
            this.initMarket(this.value);
          },
          mapClickOn(e){
            let value = e.lnglat.getLng() + "," + e.lnglat.getLat();
            this.initMarket(value);
            this.$emit('change', value);
          },
          initMarket(point){
            if(this.marker){
              this.map.remove(this.marker);
            }
            if(point){
              let position = point.split(",");
              this.marker = new window.AMap.Marker({
                position: new window.AMap.LngLat(position[0], position[1])
              });
              this.map.add(this.marker);
            }
          }
        },
        watch:{
          value(val){
            this.initMarket(val);
          }
        },
        model: {
          prop: 'value',
          event: 'change'
        }
    }
</script>

<style scoped>

</style>